<template>
  <div class="app-container">
    <div class="headBoxname">
      <div class="head_leftBox">
        <el-button
          type="primary"
          size="small"
          v-show="item.isDefault != '1'"
          @click="addBotton(item)"
          v-for="item in listData"
          :key="item.id"
          :disabled="againClick"
          icon="el-icon-paperclip"
          class="qbxzztBox"
          >添加{{ item.elementName }}</el-button
        >
        <el-button
          type="danger"
          size="small"
          @click="emptyBotton"
          v-if="list.length > 0"
          icon="el-icon-brush"
          class="xzztBox"
          >全部清空</el-button
        >
        <!-- <el-button
          type="success"
          size="small"
          @click="successBotton"
          v-if="list.length > 0"
          >确定提交</el-button
        > -->
        <el-button
          type="success"
          size="small"
          icon="el-icon-top"
          @click="successBotton"
          v-if="list.length > 0"
          :disabled="emptyJudeg"
          class="tjxzztBox"
          >确定提交</el-button
        >
      </div>

      <el-scrollbar style="height: 550px; width: 90%">
        <span style="font-size: 12px; color: gray">拖动排序</span>
        <vuedraggable class="wrapper" v-model="list">
          <transition-group class="centerBoxName">
            <div
              v-for="(item, index) in list"
              :key="item.elementKey"
              class="item"
            >
              <el-form
                :model="formData"
                size="medium"
                label-width="100px"
                class="item_box"
                @submit.native.prevent
              >
                <el-form-item
                  :label="item.elementName"
                  v-show="item.isHide != '1'"
                  class="item_box_mini"
                >
                  <span @click="editBotton(item, index)">
                    <el-input
                      maxlength="10"
                      v-model.trim="item.param"
                      style="width: 70%"
                      size="small"
                      @click="editBotton(item, index)"
                      :placeholder="item.elementName"
                      clearable
                      :disabled="item.judgeArray == true"
                    ></el-input>
                  </span>
                  <img
                    src="@/assets/img/delete2.png"
                    alt=""
                    style="height: 30px; cursor: pointer"
                    @click="edlBotton(index,item.isDefault)"
                    :disabled="item.isDefault == '1'"
                  />
                  <!-- <span style="border:1px red solid;height:auto;height:50px">
             
                  </span> -->

                  <!-- <el-button
                    class="delButton"
                    type="primary"
                    :disabled="item.isDefault == '1'"
                    size="small"
                    @click="edlBotton(index)"
                    >删除</el-button
                  > -->
                  <p
                    v-show="item.param == ''"
                    style="color: red; font-size: 12px; margin: 0px"
                  >
                    不可为空
                  </p>
                </el-form-item>
              </el-form>
            </div>
          </transition-group>
        </vuedraggable>
      </el-scrollbar>

      <div class="head_rightBox">
        <div v-if="attributeShow">
          <el-form size="medium" label-width="150px" @submit.native.prevent>
            <!-- 单选框 -->
            <el-form-item
              :label="item.propertyName"
              prop="field101"
              v-show="item.propertyType == 'radio'"
              v-for="item in list[indexCode].attributeData"
              :key="item.id"
            >
              <el-radio-group v-model="item.QRcode" size="medium">
                <el-radio
                  v-for="(item, index) in linkOptions"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 输入框 -->
            <el-form-item
              :label="item.propertyName"
              prop="field102"
              v-show="item.propertyType == 'text'"
              v-for="item in list[indexCode].attributeData"
              :key="item.id"
            >
              <el-input
                class="judgeInput"
                v-model.trim="item.according"
                placeholder="请输入判断结果"
                :maxlength="10"
                clearable
                size="small"
                :style="{ width: '80%' }"
              ></el-input>
            </el-form-item>
            <!--  -->

            <!-- 输入框-数字类型 -->
            <el-form-item
              :label="item.propertyName"
              prop="field102"
              v-show="item.propertyType == 'number'"
              v-for="item in list[indexCode].attributeData"
              :key="item.id"
            >
              <el-input
                class="judgeInput"
                v-model="item.according"
                placeholder="请输入判断结果"
                :maxlength="2"
                clearable
                size="small"
                onkeyup="value=value.replace(/[^\d]/g,'')"
                :style="{ width: '80%' }"
              ></el-input>
            </el-form-item>

            <!-- 下拉框 -->
            <el-form-item
              :label="item.propertyName"
              prop="field103"
              v-show="item.propertyType == 'select'"
              v-for="item in list[indexCode].attributeData"
              :key="item.id"
            >
              <el-select
                v-model="item.select"
                placeholder="请选择"
                style="width: 80%"
                size="small"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in selectOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 下拉框多选 -->
            <el-form-item
              :label="item.propertyName"
              prop="field103"
              v-show="item.propertyType == 'multipleSelect'"
              v-for="item in list[indexCode].attributeData"
              :key="item.id"
            >
              <el-select
                v-model="item.calculation"
                placeholder="请选择"
                style="width: 80%"
                size="small"
                clearable
                multiple
                filterable
              >
                <el-option
                  v-for="(item, index) in selectOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 百分比下拉框 -->
            <el-row
              v-show="itemData.propertyType == 'dubleSelect'"
              v-for="itemData in list[indexCode].attributeData"
              :key="itemData.id"
            >
              <el-col :span="16">
                <el-form-item label="百分比" prop="field102">
                  <el-select
                    v-model="itemData.percentage"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    filterable
                  >
                    <el-option-group
                      v-for="item in piecesOptions"
                      :key="item.elementKey"
                      :label="item.param"
                      :value="item.elementKey"
                      style="padding-bottom: 15px"
                    >
                      <el-option
                        v-for="item2 in item.resultOptions"
                        :key="item2.elementKey"
                        :label="item2.param"
                        :value="item2.elementKey"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin: 8px 7px"> / </el-col>

              <el-col :span="6">
                <el-select
                  v-model="itemData.percentage2"
                  placeholder="请选择"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option-group
                    v-for="item in piecesOptions"
                    :key="item.elementKey"
                    :label="item.param"
                    :value="item.elementKey"
                    style="padding-bottom: 15px"
                  >
                    <el-option
                      v-for="item2 in item.resultOptions"
                      :key="item2.elementKey"
                      :label="item2.param"
                      :value="item2.elementKey"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 结算结果属性：是否统计选是1，就显示，0就不显示 -->
    <div class="postBox">
      <el-tag
        v-for="(item, index) in statisticsData"
        :key="index"
        class="postMiniBox"
      >
        {{ item.param }}:N
      </el-tag>
    </div>
    <el-table border :data="roleList" class="table_Box" style="width: 100%">
      <el-table-column
        :label="item.param"
        :prop="item.param"
        align="center"
        v-for="(item, index) in showList"
        :key="index"
        min-width="100"
      />
    </el-table>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
import {
  selectAPI,
  attribute,
  addinsert,
  geteditAPI,
  editinsert,
} from "@/api/projectManagement/index.js";
export default {
  components: { vuedraggable },
  data() {
    return {
      //是脱敏还是汇总  1是脱敏2是汇总
      judgeParam: 1,
      dataPrams: null,
      //新添加的元素必须在属性赋值之后才能再次点击
      againClick: false,
      //保存元素删除后的数组
      delArray: [],
      //普通下拉框
      selectOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "熊掌",
        },
      ],
      //百分比成功率下拉框
      piecesOptions: [
        {
          label: "数据条数",
          resultOptions: [
            {
              value: "Shanghai",
              label: "上海",
            },
          ],
        },
        {
          label: "结果汇总",
          resultOptions: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
          ],
        },
      ],
      roleList: [],
      userId: "",
      //租户还是用户
      userName: "",
      //中间拖动
      list: [],
      //添加按钮
      listData: [],
      //显示属性和隐藏属性
      attributeShow: false,
      nomberCode: "",
      indexCode: 0,
      CodeData: 0,
      // 用来判断提交的时候是新增接口还是修改的接口
      addEdit: "新增",
      //数值参数
      formData: {
        field101: 1,
        field102: 1,
        field103: 1,
      },
      rules: {
        field101: [
          {
            required: true,
            message: "是否作为计算依据不能为空",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "是否作为结算依据不能为空",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "是否作为奖励依据不能为空",
            trigger: "change",
          },
        ],
      },
      field101Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      field102Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      field103Options: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      //是否转二维码
      linkrules: {
        field101: [
          {
            required: true,
            message: "是否转二维码不能为空",
            trigger: "change",
          },
        ],
      },
      linkOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      // 修改后又新增的数组
      editAddArray: [],
    };
  },
  async created() {
    // this.userId = sessionStorage.getItem("userID") - 0;
    //  //获取是租户还是用户还是平台
    //   const { data } = await getIdentityAndTopId();
    //   console.log(data,'用户信息平台还是租户')
    //   this.userName = data.identity;
    this.getList();
    this.judgeParam = this.$route.query.judgeParam - 0;
  },
  updated() {
    // console.log(this.list)
  },
  methods: {
    async getList() {
      const data = await selectAPI({
        configTypeId: this.$route.query.typeId - 0,
      });
      // const data = await selectAPI({ configTypeId: 2 });
      if (data.code == 200) {
        console.log(data.data, "默认的数据");
        data.data.forEach((element, index) => {
          element.param = "";
          element.attributeData = [];
          if (element.elementName == "状态") {
            element.param = "状态";
          }
        });
        // 筛选不重复的元素
        this.list = data.data.filter((item) => item.isDefault == "1");
        this.listData = data.data;
      }
      this.list.forEach((item, index) => {
        if (item.status == undefined) {
          item.status = "启用";
          item.sort = 0;
        }
      });
      //获取编辑参数
      const getedit = await geteditAPI({
        projectId: this.$route.query.proId - 0,
        configTypeId: this.$route.query.typeId - 0,
      });
      // console.log(getedit, "获取已经提交的数据");
      if (getedit.code == 200) {
        if (getedit.data.length > 0) {
          // 用来判断提交的时候是新增接口还是修改的接口
          this.addEdit = "修改";
          //如果key相等就赋值进去，并且删除相同的，剩下多余的
          this.list.forEach((item, index) => {
            getedit.data.forEach((item2, index2) => {
              if (item.elementKey == item2.columnKey) {
                item.param = item2.columnName;
                this.list[index].sort = item2.sort;

                item.id = item2.id || "";
                getedit.data.splice(index2, 1);
              } else {
                // 如果一进来默认的元素里面是没有参数的，为空。那么这个时候就不能给赋值ID
                if (item.param == "") {
                  item.id = null;
                }

                // console.log(item2.id,'+++')
                //  console.log(item.id,'-----')
                // console.log(item,'多余的')
              }
            });
          });
          // console.log(getedit.data, "一进来获取的LIST");
          // console.log(this.list, "一进来获取的22222");
          getedit.data.forEach(async (item, index) => {
            item.param = item.columnName;
            item.attributeData = [];
            //  item.columnKey = item.columnKey.substr(0,item.columnKey.length - 3)
            this.listData.forEach((item2, index) => {
              if (
                item2.elementKey ==
                item.columnKey.substr(0, item.columnKey.length - 7)
              ) {
                item.vueId = item2.id;
              }
            });
            if (item.data != "") {
              item.attributeData = [JSON.parse(item.data)];
            }
            // console.log(item, "传给新增按钮的参数");

            //如果是有属性的元素就进行添加属性，没有属性的元素就通过添加按钮添加
            if (item.attributeData.length > 0) {
              const data = await attribute({ elementId: item.vueId });
              item.attributeData.forEach((item2) => {
                data.data.forEach((item) => {
                  // alert("属性赋值")
                  if (item.propertyType == "radio") {
                    item.QRcode = item2[item.propertyKey];
                  } else if (item.propertyType == "text") {
                    item.according = item2[item.propertyKey];
                  } else if (item.propertyType == "number") {
                    item.according = item2[item.propertyKey];
                  } else if (item.propertyType == "select") {
                    item.select = item2[item.propertyKey]; //单选下拉
                  } else if (item.propertyType == "dubleSelect") {
                    item.percentage = item2.percentage;
                    item.percentage2 = item2.percentage2;
                  } else if (item.propertyType == "multipleSelect") {
                    // console.log(item,'多选下拉');
                    item.calculation = item2[item.propertyKey]; //多选下拉
                  }
                });
              });

              this.list.push({
                // vueId: row.vueId,
                configTypeId: item.configTypeId,
                elementKey: item.columnKey,
                elementName: item.elementName,
                elementType: item.elementType,
                id: item.id,
                isDefault: item.isDefault || "",
                isRepeat: item.isRepeat || "",
                param: item.param || "",
                attributeData: item.attributeData,
                judgeArray: false,
                status: "启用",
                isFormwork: item.isFormwork,
                sort: item.sort,
              });
              this.list[this.list.length - 1].attributeData = data.data;
              //排序
              this.list.sort((a, b) => a.sort - b.sort);
            } else {
              // console.log(item, "没有属性的元素");
              //这个是获取提交的数据
              // 如果一进来就获取到状态那么就给状态赋值隐藏属性isHide=1
              if (item.elementName == "状态") {
                this.list.push({
                  vueId: item.id,
                  elementKey: item.columnKey,
                  elementName: item.elementName,
                  elementType: item.elementType,
                  id: item.id,
                  isHide: "1",
                  isFormwork: item.isFormwork,
                  param: item.param || "",
                  attributeData: [],
                  judgeArray: false,
                  status: "启用",
                  sort: item.sort,
                });
              } else {
                this.list.push({
                  // vueId: row.vueId,
                  configTypeId: item.configTypeId,
                  elementKey: item.columnKey,
                  elementName: item.elementName,
                  elementType: item.elementType,
                  id: item.id,
                  isDefault: item.isDefault || "",
                  isRepeat: item.isRepeat || "",
                  param: item.param || "",
                  attributeData: item.attributeData,
                  judgeArray: false,
                  status: "启用",
                  isFormwork: item.isFormwork,
                  sort: item.sort,
                });
              }
              //  this.addBotton(item);
            }
          });
          //排序
          // this.list.sort((a, b) => a.sort - b.sort);
        }
      }

      //排序
      // this.list.sort((a, b) => a.sort - b.sort);

      console.log(this.list, "排序");
      var param = [
        {
          elementKey: "result_85f2c9",
          attributeData: [{ QRcode: 0, propertyKey: "count" }],
        },
        {
          elementKey: "result_85f2c9",
          attributeData: [{ QRcode: 1, propertyKey: "count1" }],
        },
        {
          elementKey: "result_85f2c9",
          attributeData: [{ QRcode: 0, propertyKey: "count2" }],
        },
      ];
      // console.log(param[0].elementKey.substr(0, param[0].elementKey.length - 7)=='result','asdasdas')
      // setTimeout(() => {

      const tttt = param.filter(
        (item) =>
          item.elementKey.substr(0, item.elementKey.length - 7) == "result" &&
          item.attributeData.filter(
            (item2) => item2.QRcode == 1 && item2.propertyKey == "count"
          )
      );

      console.log(tttt, "777");
      // }, 1000);
    },

    //添加按钮
    async addBotton(row) {
      if (this.list.length >= 100) {
        this.$message({
          type: "info",
          message: "已添加到最大值!",
        });
      } else {
        this.againClick = true; //防抖开启
        //一共生成6位数，+上_那么就是7位数
        //生成唯一值
        const only = "xxx".replace(/[xy]/g, function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
        //生成唯一值2
        const only2 = "xx".replace(/[xy]/g, function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
        //生成唯一值3
        const only3 = "x".replace(/[xy]/g, function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
        console.log(row, "添加按钮");
        //这个是新增，没问题，先不用管
        this.editAddArray.push({
          elementKey: row.elementKey + "_" + only + only2 + only3,
        });
        this.list.push({
          vueId: row.id,
          configTypeId: row.configTypeId,
          elementKey: row.elementKey + "_" + only + only2 + only3,
          elementName: row.elementName,
          elementType: row.elementType,
          // id: row.id,
          isDefault: row.isDefault,
          isRepeat: row.isRepeat,
          param: row.param || "",
          attributeData: [],
          status: "启用",
          isFormwork: row.isFormwork,
        });
        //获取属性并赋值
        console.log(row, "新增");
        const data = await attribute({ elementId: row.vueId || row.id });
        console.log(data.data, "拦截");
        console.log(this.list, "拦截222");
        if (data.code == 200) {
          if (data.data.length > 0) {
            if (row.attributeData.length > 0) {
              row.attributeData.forEach((item2) => {
                data.data.forEach((item) => {
                  if (item.propertyType == "radio") {
                    item.QRcode = item2[item.propertyKey];
                  } else if (item.propertyType == "text") {
                    item.according = item2[item.propertyKey];
                  } else if (item.propertyType == "number") {
                    item.according = item2[item.propertyKey];
                  } else if (item.propertyType == "select") {
                    item.select = item2[item.propertyKey]; //单选下拉
                  } else if (item.propertyType == "dubleSelect") {
                    item.percentage = item2.percentage;
                    item.percentage2 = item2.percentage2;
                  } else if (item.propertyType == "multipleSelect") {
                    item.calculation = item2[item.propertyKey]; //多选下拉
                  }
                });
              });
              console.log(row, "来了");
              if (row.attributeData.length > 0) {
                this.list.push({
                  // vueId: row.vueId,
                  configTypeId: row.configTypeId,
                  elementKey: row.columnKey,
                  elementName: row.elementName,
                  elementType: row.elementType,
                  id: row.id,
                  isDefault: row.isDefault,
                  isRepeat: row.isRepeat,
                  param: row.param || "",
                  attributeData: row.attributeData,
                  judgeArray: false,
                  status: "启用",
                  isFormwork: row.isFormwork,
                });
              }

              this.list[this.list.length - 1].attributeData = data.data;
            } else {
              console.log("新增");
              data.data.forEach((item) => {
                item.QRcode = 0; //单选框
                item.according = ""; //输入框
                item.select = ""; //下拉框
                item.percentage = ""; //百分比下拉框
                item.percentage2 = ""; //百分比下拉框
                item.propertyKey = item.propertyKey;
                item.judgeArray = "新增";
              });

              this.list[this.list.length - 1].attributeData = data.data;
            }
          } else {
            this.list[this.list.length - 1].attributeData = [];
          }
          this.againClick = false; //防抖关闭
        }
        console.log(this.list, "列表2222");
      }
    },
    //全部清空
    emptyBotton() {
      this.$confirm("此操作将清空表单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const del = this.list.filter((item) => item.judgeArray == false);
          del.forEach((item) => (item.status = "禁用"));
          this.list = this.list.filter((item) => item.isDefault == "1");
          this.delArray.push(...del);
          // console.log(del, "清空");
          this.$message({
            type: "success",
            message: "清空成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },
    //确定按钮
    async successBotton() {
      console.log(this.list, "确定");
      if (this.addEdit == "修改") {
        // 如果有新增的元素就执行
        if (this.editAddArray.length > 0) {
          var adddataList = [];
          // 过滤并删除list重复的元素
          this.editAddArray.forEach((item) => {
            this.list.forEach((item2, index) => {
              if (item2.elementKey == item.elementKey) {
                adddataList.push(item2);
                this.list.splice(index, 1);
              }
            });
          });
          // list是删除新增后的修改数组，  dataList是新增的数组
          var dataList = adddataList.map((item, index) => {
            return {
              columnKey: item.elementKey, //列标识
              columnName: item.param, //列名称
              elementName: item.elementName, //元素名称
              elementType: item.elementType, //元素类型
              configTypeName: this.$route.query.four, //项目配置类型名称
              configTypeId: this.$route.query.typeId - 0, //项目配置类型id
              data: item.attributeData, //配置属性信息
              // id: item.id,
              projectId: this.$route.query.proId, //项目ID
              projectName: this.$route.query.name, //项目名称
              sort: index,
              status: item.status,
              isFormwork: item.isFormwork,
              // status: "string",
            };
          });
          console.log(dataList, "多选下拉框111111");
          // 操作data里面的属性，把属性全部改为后端要的格式，真jb操蛋
          dataList.forEach((item3) => {
            let hhh = {};
            if (item3.data.length != 0) {
              item3.data.forEach((item2) => {
                if (item2.propertyType == "radio") {
                  hhh[item2.propertyKey] = item2.QRcode;
                  //  console.log(item2[item2.propertyKey],'单选框')
                } else if (item2.propertyType == "text") {
                  hhh[item2.propertyKey] = item2.according;
                  // console.log(item2[item2.propertyKey],'输入框')
                } else if (item2.propertyType == "select") {
                  hhh[item2.propertyKey] = item2.select;
                  // console.log(item2[item2.propertyKey],'下拉框')
                } else if (item2.propertyType == "number") {
                  hhh[item2.propertyKey] = item2.according;
                  // console.log(item2[item2.propertyKey],'数字输入框')
                } else if (item2.propertyType == "dubleSelect") {
                  hhh[item2.propertyKey] = item2.percentage;
                  hhh[item2.propertyKey + "2"] = item2.percentage2;
                  // console.log(item2[item2.propertyKey],'百分比')
                } else if (item2.propertyType == "multipleSelect") {
                  hhh[item2.propertyKey] = item2.calculation;
                  // console.log(item2[item2.propertyKey], "多选下拉框");
                }
              });
            }
            //判断data对象是否为空
            if (JSON.stringify(hhh) == "{}") {
              item3.data = "";
            } else {
              item3.data = JSON.stringify(hhh);
            }
          });
          this.editAddArray = [];
        } //1111111
        //如果有删除的元素就合并
        if (this.delArray.length > 0) {
          this.list = [...this.list, ...this.delArray];
        }
        // 不管有没有新增的元素，只要在修改状态下，那么都执行修改的接口
        var editdataList = this.list.map((item, index) => {
          return {
            columnKey: item.elementKey, //列标识
            columnName: item.param, //列名称
            elementName: item.elementName, //元素名称
            elementType: item.elementType, //元素类型
            configTypeName: this.$route.query.four, //项目配置类型名称
            configTypeId: this.$route.query.typeId - 0, //项目配置类型id
            data: item.attributeData, //配置属性信息
            id: item.id,
            projectId: this.$route.query.proId, //项目ID
            projectName: this.$route.query.name, //项目名称
            sort: index,
            status: item.status,
            isFormwork: item.isFormwork,
            // status: "string",
          };
        });

        // 操作data里面的属性，把属性全部改为后端要的格式，真jb操蛋
        editdataList.forEach((item3) => {
          let hhh = {};
          if (item3.data.length > 0) {
            item3.data.forEach((item2) => {
              if (item2.propertyType == "radio") {
                hhh[item2.propertyKey] = item2.QRcode;
                //  console.log(item2[item2.propertyKey],'单选框')
              } else if (item2.propertyType == "text") {
                hhh[item2.propertyKey] = item2.according;
                // console.log(item2[item2.propertyKey],'输入框')
              } else if (item2.propertyType == "select") {
                hhh[item2.propertyKey] = item2.select;
                // console.log(item2[item2.propertyKey],'下拉框')
              } else if (item2.propertyType == "number") {
                hhh[item2.propertyKey] = item2.according;
                // console.log(item2[item2.propertyKey],'数字输入框')
              } else if (item2.propertyType == "dubleSelect") {
                hhh[item2.propertyKey] = item2.percentage;
                hhh[item2.propertyKey + "2"] = item2.percentage2;
                // console.log(item2[item2.propertyKey],'百分比')
              } else if (item2.propertyType == "multipleSelect") {
                hhh[item2.propertyKey] = item2.calculation;
                // console.log(item2.propertyKey, "多选下拉框");
              }
            });
          }

          //判断data对象是否为空
          if (JSON.stringify(hhh) == "{}") {
            item3.data = "";
          } else {
            item3.data = JSON.stringify(hhh);
          }
        });
        // 把新增的数据和需要修改的数据合并
        console.log(editdataList, "多选下拉框");
        if (dataList != undefined) {
          var editParmaList = [...editdataList, ...dataList];
        } else {
          var editParmaList = [...editdataList];
        }

        // 把状态排序到最后
        var judge = [];
        editParmaList.forEach((item, index) => {
          if (item.elementName == "状态") {
            judge.push(item);
            editParmaList.splice(index, 1);
          }
        });
        if (judge.length > 0) {
          editParmaList.push(...judge);
        }

        // 把所有元素按照顺序排序传给后端对应的下标顺序
        editParmaList.forEach((item, index) => {
          item.sort = index;
        });

        let editparam = {
          proId: this.$route.query.proId - 0,
          configTypeId: this.$route.query.typeId - 0,
          cpaProjectInfoList: editParmaList,
        };
        console.log(editparam, "最后修改的数据");
        const editdata = await editinsert(editparam);
        if (editdata.code == 200) {
          this.$message({
            message: "提交成功!",
            type: "success",
          });
          this.editAddArray = []; //新增的元素数组
          this.delArray = []; //删除的元素数组
          this.$router.push("projectlist"); //跳转到项目页面
        } else {
          this.$message.error("提交失败!");
        }
      } else {
        console.log(this.list, "新增确定参数00000000");
        //如果是纯新增
        var dataList = this.list.map((item, index) => {
          console.log(item, "数据222");
          return {
            columnKey: item.elementKey, //列标识
            columnName: item.param, //列名称
            elementName: item.elementName, //元素名称
            elementType: item.elementType, //元素类型
            configTypeName: this.$route.query.four, //项目配置类型名称
            configTypeId: this.$route.query.typeId - 0, //项目配置类型id
            data: item.attributeData, //配置属性信息
            // id: item.id,
            projectId: this.$route.query.proId, //项目ID
            projectName: this.$route.query.name, //项目名称
            sort: index,
            status: item.status,
            isFormwork: item.isFormwork,
          };
        });

        // 操作data里面的属性，把属性全部改为后端要的格式，真jb操蛋
        dataList.forEach((item3) => {
          let hhh = {};
          if (item3.data.length != 0) {
            item3.data.forEach((item2) => {
              if (item2.propertyType == "radio") {
                hhh[item2.propertyKey] = item2.QRcode;
                console.log(item2, "单选框");
              } else if (item2.propertyType == "text") {
                hhh[item2.propertyKey] = item2.according;
                // console.log(item2[item2.propertyKey],'输入框')
              } else if (item2.propertyType == "select") {
                console.log(item2, "输入框2222");
                hhh[item2.propertyKey] = item2.select;
                // console.log(item2[item2.propertyKey],'下拉框')
              } else if (item2.propertyType == "number") {
                hhh[item2.propertyKey] = item2.according;
                // console.log(item2[item2.propertyKey],'数字输入框')
              } else if (item2.propertyType == "dubleSelect") {
                console.log(item2, "百分比2222");
                hhh[item2.propertyKey] = item2.percentage;
                hhh[item2.propertyKey + "2"] = item2.percentage2;
                // console.log(item2[item2.propertyKey],'百分比')
              } else if (item2.propertyType == "multipleSelect") {
                hhh[item2.propertyKey] = item2.calculation;
                // console.log(item2[item2.propertyKey], "多选下拉框");
              }
            });
          }
          //判断data对象是否为空
          if (JSON.stringify(hhh) == "{}") {
            item3.data = "";
          } else {
            item3.data = JSON.stringify(hhh);
          }
        });

        // 把状态排序到最后
        var judge = [];
        dataList.forEach((item, index) => {
          if (item.elementName == "状态") {
            judge.push(item);
            dataList.splice(index, 1);
          }
        });
        if (judge.length > 0) {
          dataList.push(...judge);
        }

        // 把所有元素按照顺序排序传给后端对应的下标顺序
        dataList.forEach((item, index) => {
          item.sort = index;
        });

        let param = {
          proId: this.$route.query.proId - 0,
          configTypeId: this.$route.query.typeId - 0,
          cpaProjectInfoList: dataList,
        };
        console.log(param, "新增最后数据");
        const data = await addinsert(param);
        if (data.code == 200) {
          this.$message({
            message: "提交成功!",
            type: "success",
          });
          // this.getList();
          this.$router.push("projectlist"); //跳转到项目页面
        } else {
          this.$message.error("提交失败!");
        }
      }
    },
    // 删除
    edlBotton(index,isDefault) {
      // console.log(this.list[index], "删除");
      if(isDefault == 0){
          if (this.list[index].id) {
        this.list[index].status = "禁用";
        this.delArray.push(this.list[index]);
      }
      this.list[index].attributeData = [];
      this.list[index].param = "";
      this.list.splice(index, 1);

      this.editBotton(this.dataPrams, this.indexCode);
      }else{
        this.$message({
            message: "不可删除!",
            type: "warning",
          })
      }
    },

    // 点击百分比下拉框
    changeButton(row) {
      console.log(row, "百分比下拉框属性值");
      // if(row!=''){
      //     this.list.forEach(item=>{
      //   if(item.param==row){
      //     console.log('找到了')
      //       item.judgeArray=true;
      //   }else{
      //      item.judgeArray=false;
      //   }
      // })
      // }
    },
    //点击输入框
    async editBotton(row, index) {
      console.log(row, "输入框");
      if (row.elementType == "double") {
        //如果是汇总数据那么百分比就只有计算汇总
        if (this.judgeParam == 2) {
          this.piecesOptions[1].resultOptions = [];
          this.piecesOptions[0].resultOptions = this.list.filter((item) => {
            if (item.elementKey.match("result")) {
              return item;
            }
            // if (
            //   item.elementKey.substr(0, item.elementKey.length - 7) == "result"
            // ) {
            //   return item;
            // }
          });
        } else if (row.elementName == "计算汇总") {
          const calculationList = await geteditAPI({
            elementType: "double",
            elementName: "数值",
            id: row.vueId,
            configTypeId: 3, // 3等于是原始数据得typeID
            projectId: this.$route.query.proId - 0, //项目ID
          });
          if (calculationList.code == 200) {
            calculationList.data.forEach((item) => {
              item.value = item.columnKey; //传key
              item.label = item.columnName;
            });
            this.selectOptions = calculationList.data;
          }
          console.log(calculationList, "结果汇总的计算列表参数");
        } else {
          //如果是脱敏数据那么百分比就有2种可以选择
          this.piecesOptions[0].resultOptions = this.list.filter(
            (item) => item.elementKey == "data_count"
          );
          this.piecesOptions[1].resultOptions = this.list.filter((item) => {
            if (item.elementKey.match("result")) {
              return item;
            }
            // if (
            //   item.elementKey.substr(0, item.elementKey.length - 7) == "result"
            // ) {
            //   return item;
            // }
          });
        }
      } else if (row.elementName == "结果汇总") {
        // alert("2");
        // 如果点击结果汇总，就获取下拉框里面的值，这里面的值就是原始数据里面添加的数值元素里面的名称，
        // 其实这里传递的参数除了id以外，其它都是死参数，elementType:"int",elementName:"数值"
        const calculationList = await geteditAPI({
          elementType: "string",
          elementName: "判断",
          id: row.vueId,
          configTypeId: 3, //3等于是原始数据得typeID
          projectId: this.$route.query.proId - 0, //项目ID
        });
        console.log(calculationList, "测试");
        if (calculationList.code == 200) {
          calculationList.data.forEach((item) => {
            item.value = item.columnKey;
            item.label = item.columnName;
          });
          this.selectOptions = calculationList.data;
        }
        console.log(calculationList, "结果汇总的计算列表参数");
      }

      if (row.attributeData.length > 0) {
        this.attributeShow = true;
      } else {
        this.attributeShow = false;
      }
      this.indexCode = index;
      this.dataPrams = row;
    },
  },
  // watch:{
  //   list:{
  //     handler(){
  //       // this.list.map(item=>{

  //       // })
  //       console.log(this.list,'监听')
  //     },
  //     deep:true,
  //   }
  // },
  // 计算属性
  computed: {
    // 把状态元素过滤出来不在表格中显示
    showList() {
      return this.list.filter((item) => {
        return item.isHide != "1";
      });
    },
    //判断是否有空元素，如果有空就不能点击提交
    emptyJudeg() {
      return this.list.some((item) => {
        return item.param == "";
      });
    },
    //结果汇总的统计
    statisticsData() {
      return this.list.filter((item) => {
        if (
          item.elementKey.substr(0, item.elementKey.length - 7) != "result" &&
          item.elementKey.substr(0, item.elementKey.length - 7) != "percentage"
        )
          return false; //如果key不是结果汇总，直接筛掉
        return item.attributeData.some(
          (item) => item.QRcode === 1 && item.propertyKey === "count"
        ); //如果key是结果汇总，则需要看item.Data中是否有符合QRcode=1并且key=count的项，只要有一项满足，就返回true,所以用some
      });
    },
    // statisticsData() {
    //   return this.list.filter((item) => {
    //     if (item.elementKey.substr(0, item.elementKey.length - 7) != "result")
    //       return false; //如果key不是结果汇总，直接筛掉
    //     return item.attributeData.some(
    //       (item) => item.QRcode === 1 && item.propertyKey === "count"
    //     ); //如果key是结果汇总，则需要看item.Data中是否有符合QRcode=1并且key=count的项，只要有一项满足，就返回true,所以用some
    //   });
    // },
  },
  // percentage(){
  //   this.list.filter(item=>{
  //     item
  //   })
  // },
};
</script>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
<style scoped lang="scss">
//全部清空按钮选中状态
.xzztBox {
  // border: 1px red dashed;
  background: rgb(255, 242, 243);
  color: red;
  border: 1px rgb(0, 0, 0, 0) solid;
}
.xzztBox:hover {
  border: 1px red dashed;
}
.tjxzztBox {
  // border: 1px red dashed;
  background: rgb(231, 250, 240);
  color: rgb(28, 182, 32);
  border: 1px rgb(0, 0, 0, 0) solid;
}
.tjxzztBox:hover {
  border: 1px rgb(28, 182, 32) dashed;
  background: rgb(231, 250, 240);
  color: rgb(28, 182, 32);
}
.qbxzztBox {
  // border: 1px red dashed;
  background: rgb(246, 247, 255);
  color: rgb(59, 119, 246);
  border: 1px rgb(0, 0, 0, 0) solid;
}
.qbxzztBox:hover {
  border: 1px rgb(59, 119, 246) dashed;
  background: rgb(246, 247, 255);
  color: rgb(59, 119, 246);
}
// 便签
.postBox {
  // border: 1px red solid;
  margin-top: 10px;
  display: flex;
  .postMiniBox {
    margin-right: 5px;
  }
}
.headBoxname {
  display: flex;
  border: 1px rgb(223, 230, 236) solid;
  justify-content: space-between;
  // 左边按钮
  .head_leftBox {
    width: 50%;
    border-right: 1px rgb(223, 230, 236) solid;
    button {
      margin: 0px auto;
      display: block;
      margin: 10px auto;
    }
  }
  // 中间拖拽
  .wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    //   border: 1px red solid;
    .centerBoxName {
      //    background-color: #42b983;
      width: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      .item {
        // border: 1px red solid;
        display: flex;
        width: auto;
        // margin: 0 auto;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        // padding-top: 20px;
        //   background-color: #42b983;
        .item_box {
          // margin: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          // border: 1px red solid;
          width: 90%;
          .item_box_mini {
            //  border: 1px red solid;
            width: 70%;
            display: inline-block;
            img {
              // border: 1px red solid;
              vertical-align: middle;
              margin-left: 10px;
            }
            .delButton {
              border: none;
              margin-left: 10px;
              height: 30px;
              width: auto;
              display: inline;
            }
          }
          //  margin-right: 60px;
        }
      }
    }
  }

  //右边属性
  .head_rightBox {
    width: 50%;
    border-left: 1px rgb(223, 230, 236) solid;
  }
}
//表格
.table_Box {
  margin-top: 10px;
  // width: 80%;
  .has-gutter {
    border: 1px red solid;
  }
  tr {
    border: 1px red solid;
  }
}
</style>
